import React, { useEffect, useMemo, useState } from 'react';
import {
  Card,
  Grid,
  Table,
  Space,
  Typography,
  DatePicker,
} from '@arco-design/web-react';
import useLocale from '@/utils/useLocale';
import axios from 'axios';
import locale from './locale';
import PublicOpinion from './public-opinion';
import PeriodLine from '@/components/Chart/period-legend-line';
import './mock';
import { center } from '@turf/turf';
import {
  Chart,
  Coordinate,
  Interaction,
  Interval,
  Legend,
  Tooltip,
} from 'bizcharts';
import Pie from '@/components/Chart/pie';

const { RangePicker }: any = DatePicker;
const { Row, Col } = Grid;

function DataAnalysis() {
  const t = useLocale(locale);
  const [loading, setLoading] = useState(false);
  const [tableLoading, setTableLoading] = useState(false);

  const [chartData, setChartData] = useState([]);
  const [tableData, setTableData] = useState([]);

  const getChartData = async () => {
    setLoading(true);
    const { data } = await axios
      .get('/api/data-analysis/content-publishing')
      .finally(() => setLoading(false));
    setChartData(data);
  };

  const getTableData = async () => {
    setTableLoading(true);
    const { data } = await axios
      .get('/api/data-analysis/author-list')
      .finally(() => setTableLoading(false));
    setTableData(data.list);
  };

  useEffect(() => {
    getChartData();
    getTableData();
  }, []);

  const columns = useMemo(() => {
    return [
      {
        title: t['dataAnalysis.authorTable.rank'],
        dataIndex: 'id',
      },
      {
        title: t['dataAnalysis.authorTable.author'],
        dataIndex: 'author',
      },
      {
        title: t['dataAnalysis.authorTable.content'],
        dataIndex: 'contentCount',
        sorter: (a, b) => a.contentCount - b.contentCount,
        render(x) {
          return Number(x).toLocaleString();
        },
      },
      {
        title: t['dataAnalysis.authorTable.click'],
        dataIndex: 'clickCount',
        sorter: (a, b) => a.clickCount - b.clickCount,
        render(x) {
          return Number(x).toLocaleString();
        },
      },
    ];
  }, [t]);

  return (
    <Space size={16} direction="vertical" style={{ width: '100%' }}>
      <Card>
        <Typography.Title heading={6}>
          {t['dataAnalysis.title.publicOpinion']}
        </Typography.Title>
        <PublicOpinion />
      </Card>

      <Row gutter={16}>
        <Col span={14}>
          <Card>
            <Row align={'center'} justify={'space-around'}>
              <p>{t['dataAnalysis.title.publishingRate']}</p>
              <RangePicker />
            </Row>
            <PeriodLine data={chartData} loading={loading} />
          </Card>
        </Col>
        <Col span={10}>
          <Card>
            <Row align={'center'} justify={'space-around'}>
              <p>使用分布</p>
              <RangePicker />
            </Row>
            <div style={{ height: '370px' }}>
              <Pie
                chartData={[
                  { type: '睡觉测试', value: 30 },
                  { type: '晨练', value: 5 },
                  { type: '上班', value: 40 },
                  { type: '亲子互动', value: 5 },
                  { type: '辅导作业', value: 5 },
                  { type: '练球&瑜伽', value: 5 },
                  { type: '洗澡', value: 5 },
                  { type: '阅读充电', value: 5 },
                ]}
              ></Pie>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={14}>
          <Card>
            <Row align={'center'} justify={'space-around'}>
              <p>{t['dataAnalysis.title.studentData']}</p>
              <RangePicker />
            </Row>
            <PeriodLine data={chartData} loading={loading} />
          </Card>
        </Col>
        <Col span={10}>
          <Card>
            <Row align={'center'} justify={'space-around'}>
              <p>使用分布</p>
              <RangePicker mode={'month'} />
            </Row>
            <div style={{ height: '370px' }}>
              <Pie
                chartData={[
                  { type: '睡觉测试', value: 30 },
                  { type: '晨练', value: 5 },
                  { type: '上班', value: 40 },
                  { type: '亲子互动', value: 5 },
                  { type: '辅导作业', value: 5 },
                  { type: '练球&瑜伽', value: 5 },
                  { type: '洗澡', value: 5 },
                  { type: '阅读充电', value: 5 },
                ]}
              ></Pie>
            </div>
          </Card>
        </Col>
      </Row>
    </Space>
  );
}
export default DataAnalysis;
